<template>
    <div class="container-comment-item">
        <div id="name">{{comment.Name}}&nbsp;&nbsp;说:</div>
        <div v-show="comment.Pname&&comment.Pname.length" class="p-comment-container">
            <div class="p-name">
                {{comment.Pname}} &nbsp;&nbsp;说:
            </div>
            <div class="p-content">
                {{comment.Pcontent}}
            </div>
        </div>
        <div id="content">{{comment.Content}}</div>
        <div id="footer">
            {{time}}&nbsp;&nbsp;&nbsp;
            <a @click="refer" class="ref">引用</a>
        </div>
    </div>
</template>

<script>
export default {
    props: ["comment"],
    data() {
        return {
            time: ""
        }
    },
    mounted() {
        let t = new Date(parseInt(this.comment.Time))
        this.time = t.getFullYear() + '年' + (t.getMonth()+1) + '月' + t.getDate() + '日'
    },
    methods: {
        refer() {
            this.$emit("refer")
        }
    }
}
</script>

<style lang="less" scoped>
    .container-comment-item {
        position: relative;
        margin-bottom: 50px;
        border-bottom: 2px dotted @dark_comment_list_border;
        .p-comment-container {
            background: rgba(53, 87, 119,0.5);
            border-radius: 10px;
            padding: 10px 0;
            padding-left: 15px;
            margin-bottom: 15px;
            .p-name {
                
            }
            .p-content {
                margin-left: 30px;
            }
        }
        #name {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 20px;
            font-style: "Times New Roman",Georgia,Serif;
        }
        #content {
            font-size: 14px;
            font-weight: 400;
            margin-bottom: 30px;
            color: @dark_comment_list_color;
        }
        #footer {
            font-size: 12px;
            font-weight: 400;
            position: absolute;
            bottom: 5%;
            right: 25%;
            .ref {
                text-decoration: underline;
            }
            .ref:hover {
                cursor: pointer;
            }
        }
    }
</style>